<template>
  <!-- 工艺参数监控规则表单弹窗 -->
  <div>
    <el-dialog
      :close-on-click-modal="false"
      v-model="visibleDialog"
      :title="props.title"
      width="800px"
      draggable
      @close="closeDialog"
      destroy-on-close
      align-center
    >
      <el-table
        ref="dataTableRef"
        :data="tableData"
        highlight-current-row
        border
      >
        <el-table-column
          :label="tableTitle"
          prop="filed"
          min-width="150"
          show-overflow-tooltip
          align="center"
        />
        <el-table-column
          label="修改前"
          prop="beforeData"
          min-width="150"
          show-overflow-tooltip
          align="center"
        />

        <el-table-column
          label="修改后"
          prop="afterData"
          min-width="150"
          show-overflow-tooltip
          align="center"
        />

      </el-table>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { getUserInfo } from "@/api/user/index";
import request from "@/utils/request";
import {useTable, useDownload, useDictionary} from "@/utils/useTable";
import {useDictStoreHook} from "@/store/modules/dictionary"; // 引入
import {validateNumber, validateNumberCanNot1} from "@/utils/commonHooks";
import {getMdmProcessEquipApi} from "@/utils/commonData";
import dayjs from "dayjs";
import {authAllPerm} from "@/utils";

const dictionaryStore = useDictStoreHook();

defineOptions({
  name: "PCMPSMPARAMMONITORRULECHANGERECORDDETAIL",
  inheritAttrs: false,
});

const emit = defineEmits(["change-visible", "handle-submit"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
});

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
}

const comparisonFields = [
  {
    field: "processDataType",
    name: "工艺数据类别",
    type: "dict",
    dict: "processDataType"
  },
  {
    field: "monitorDataType",
    name: "监控数据类型",
    type: "dict",
    dict: "PsmMonitorDataType"
  },
  {
    field: "parameterValue",
    name: "参考值",
    type: "input"
  },
  {
    field: "lowerLimitValue",
    name: "控制范围下限",
    type: "input"
  },
  {
    field: "upperLimitValue",
    name: "控制范围上限",
    type: "input"
  },
  {
    field: "samplingFrequency",
    name: "采样频度",
    type: "input"
  },
  // {
  //   field: "collectionFrequencyTime",
  //   name: "采样频度时间",
  //   type: "input"
  // },
  // {
  //   field: "collectionFrequencyUnit",
  //   name: "采样频度单位",
  //   type: "input"
  // },
  {
    field: "isGenerateWorkOrder",
    name: "生成工单",
    type: "switch"
  },
  {
    field: "isSendMail",
    name: "发送邮件",
    type: "switch"
  },
  {
    field: "responsiblePersonName",
    name: "第一负责人",
    type: "input"
  },
]

/** 弹窗显示 **/
const visibleDialog = ref(false);
watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;
  }
);
watch(
  () => props.data,
  (data: any) => {
    if (data.id){
      const before = JSON.parse(data.beforeData);
      const after = JSON.parse(data.afterData);
      tableTitle.value = after.parameterDesc
      tableData.value = comparisonFields
        .filter((item) => before[item.field] !== after[item.field])
        .map((item) => {
          if (item.type === "switch") {
            after[item.field] = after[item.field] ? "是" : "否"
            before[item.field] = before[item.field] ? "是" : "否"
          }
          if (item.type === "dict") {
            after[item.field] = useDictionary(item.dict, after[item.field])
            before[item.field] = useDictionary(item.dict, before[item.field])
          }
          if(item.field === 'samplingFrequency'){
            let beforeValue = '空值';
            let afterValue = '空值';
            beforeValue = before[item.field] ? useDictionary("ScaCollectFrequency", before[item.field]) : ""
            if (before[item.field] == 2){
              beforeValue = beforeValue + ` ${before.collectionFrequencyTime} ${before.collectionFrequencyUnit === 's' ? '秒' : '分钟'}`
            }
            afterValue = after[item.field] ? useDictionary("ScaCollectFrequency", after[item.field]) : ""
            if (after[item.field] == 2){
              afterValue = afterValue + ` ${after.collectionFrequencyTime} ${after.collectionFrequencyUnit === 's' ? '秒' : '分钟'}`
            }
            after[item.field] = afterValue
            before[item.field] = beforeValue
          }
          return {
            filed: item.name,
            afterData: after[item.field],
            beforeData: before[item.field],
          }
        })
    }
  }
);

const tableData = ref([]);
const tableTitle = ref("");

</script>

<style lang="scss" scoped>
</style>
